<template>
  <view class="move-container">
    <view class="header-container">
      <u-subsection
        :list="moveTypeList"
        :current="currentMove"
        active-color="#56d39d"
        @change="changeMoveType"></u-subsection>
      <view class="tabs-container">
        <u-tabs
        :list="artworksTypeAllListData"
        :current="tabsCurrent"
        inactive-color="#606266"
        active-color="#56d39d"
        :gutter="20"
        bg-color="transparent"
        class="tabs-content"
        name="category_name"
        :is-scroll="true"
        @change="tabsChange"></u-tabs>
      </view>
    </view>
    <!-- 作品 -->
    <view class="artworks-list-container">
      <!-- 定制类型 -->
      <MakeAllArtworksList
        v-if="searchForm.type == 10"
        :artworks-list="artworksList"
        :is-album="true"
        :is-batch="isBatch"
        @handleCheckBox="handleCheckBox"/>
    </view>
    <!-- 操作栏 -->
    <view class="bottom-main">
      <view class="bottom-view">
        <view v-if="currentMove === 0" @click="checkSelect('album')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
          <text class="huiju-iconfont huiju-icon-ico_classify_unfold"></text>
          <text class="bottom-view-button-text">选择专辑</text>
        </view>
        <view v-if="currentMove === 1 || currentMove === 2" @click="checkSelect('moveArtworksToAuthor')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
          <text class="huiju-iconfont huiju-icon-yidong-xuanzhong-12"></text>
          <text class="bottom-view-button-text">选择主页</text>
        </view>
        <view v-if="currentMove === 3" @click="checkSelect('changeArtworksType')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
          <u-icon name="grid" color="#56d39d" size="28"></u-icon>
          <text class="bottom-view-button-text">选择类型</text>
        </view>
        <view @click="goBack()" class="bottom-view-button bottom-view-button-padding bottom-view-button-margin0">
          <text class="huiju-iconfont huiju-icon-fanhui1"></text>
          <text class="bottom-view-button-text">返回上一页</text>
        </view>
      </view>
    </view>
    <!-- 专辑操作栏 -->
    <SelectAlbum
      :popup-show="album.selectAlbumShow"
      :album-info="searchForm"
      @close="close"
      @clickAlbum="moveAlbum"></SelectAlbum>

    <!-- 选择主页 移动图片 -->
    <u-select
      v-model="moveArtworksToAuthor.showSelect"
      :list="authorList"
      value-name="id"
      label-name="name"
      confirm-color="#56d39d"
      @confirm="confirmMoveArtworks"></u-select>
    
    <!-- 选择主页 移动图片 -->
    <u-select
      v-model="changeArtworksType.showSelect"
      :list="artworksTypeList"
      confirm-color="#56d39d"
      value-name="id"
      label-name="category_name"
      @confirm="confirmMoveArtworks"></u-select>
  </view>
</template>

<script>
  import MakeAllArtworksList from '@/components/artworksList/makeAllArtworksList.vue'; // 全部
  import SelectAlbum from '@/components/selectAlbum/selectAlbum.vue'; // 选择专辑
  import { mapGetters, mapState } from 'vuex';
  import {
    findAllArtworksList,
    batchUpdateArtworks,
    authorInfoByUserId,
    batchCopyArtworks
  } from '@/api/artworks';
  import { makeArtworksTypeAllList } from '@/api/applet';
  export default {
    components: {
      MakeAllArtworksList,
      SelectAlbum
    },
    data() {
      return {
        ids: [], // 已选择的作品id集合
        album: {
          selectAlbumShow: false, // 选择作品集
        },
        changeArtworksType: {
          showSelect: false, // 选择修改类型
        },
        isBatch: true,
        moveArtworksToAuthor: {
          showSelect: false, // 移动作品
        },
        authorList: [], // 主页列表
        artworksList: [], // 作品列表
        currentMove: 0, // 移动的类型
        tabsCurrent: 0, // 现在操作类型
        moveTypeList: [{
          name: '移入专辑'
        },
        // {
        //   name: '移动作品'
        // }, {
        //   name: '复制作品'
        // },
        // {
        //   name: '修改类型'
        // }
        ],
        searchForm: {
          author_id: '',
          type: '',
          cate_id: ''
        },
        artworksTypeAllListData: [],
        artworksTypeList: []
      }
    },
    onLoad(options) {
      this.searchForm.author_id = options.author_id;
      this.searchForm.type = options.type;
      this.tabsCurrent = options.tabsCurrent;
      this.getArtworksTypeAllListData();
      this.getAuthorInfoByUserId();
    },
    methods: {

      // 作品分类
      getArtworksTypeAllListData() {
        makeArtworksTypeAllList().then(result => {
          if (result && result.data) {
            let list = result.data;
            this.artworksTypeList = list.filter(item => item.id !== 5)
            this.artworksTypeAllListData = list;
            this.searchForm.cate_id = list[this.tabsCurrent].id;
            this.getAllArtworksList();
          }
        })
      },

      // 根据用户id获取全部的达人主页信息
      getAuthorInfoByUserId() {
        authorInfoByUserId({
          show_make: '2'
        }).then(result => {
          if (result && result.data && result.data.length > 0) {
            this.authorList = result.data;
          }
        })
      },

      // 根据主页id和作品类型去获取作品列表
      getAllArtworksList() {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
        })
        findAllArtworksList(this.searchForm).then(result => {
          uni.hideToast();
          if (result && result.data) {
            let list = result.data.list;
            list.forEach(item => {
              item.checked = false;
            })
            this.artworksList = list;
          }
        })
      },

      // 点击置顶操作 is_top 置顶 cancel_top取消置顶
      checkSelect(batchType) {
        const artworksList = this.artworksList;
        const flag = artworksList.some(item => {
          return item.checked
        })
        if (!flag) {
          uni.showToast({
            title: '请选择，在操作',
            icon: 'none'
          })
          return;
        }
        const ids = []; // id集合
        artworksList.forEach(item => {
          if (item.checked) {
            ids.push(item.id);
          } 
        })
        this.ids = ids;
        if (batchType === 'album') {
          this.album.selectAlbumShow = true;
        } else if (batchType === 'moveArtworksToAuthor') {
          this.moveArtworksToAuthor.showSelect = true;
        } else if (batchType === 'changeArtworksType') {
          if (this.searchForm.cate_id == 5) {
            uni.showToast({
              title: '该作品类型不支持修改',
              icon: 'none'
            })
            return;
          }
          this.changeArtworksType.showSelect = true;
        }
      },

      // 选择移入的专辑
      moveAlbum(albumData) {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        batchUpdateArtworks({
          album_id: albumData.id,
          ids: this.ids
        }).then(result => {
          if (result && result.code === 200) {
            uni.hideToast();
            this.getAllArtworksList();
            this.album.selectAlbumShow = false;
          }
        })
      },

      // 移动作品到另一个主页
      confirmMoveArtworks(val) {
        const params = val[0].value;
        if (this.currentMove === 1) {
          this.moveArtworksToAuthorHome(params);
        } else if (this.currentMove === 2) {
          this.copyArtworksToAuthorHome(params);
        } else if (this.currentMove === 3) {
          this.moveArtworksType(params);
        }
      },

      // 修改作品；类型
      moveArtworksType(cate_id) {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        batchUpdateArtworks({
          type: this.type,
          ids: this.ids,
          cate_id: cate_id || this.searchForm.cate_id
        }).then(result => {
          if (result && result.code === 200) {
            uni.hideToast();
            this.getAllArtworksList();
            this.album.selectAlbumShow = false;
          }
        })
      },

      // 移动作品到另外一个主页
      moveArtworksToAuthorHome(author_id) {
        uni.showModal({
          title: '温馨提示',
          content: `确定要移动到该主页吗？`,
          confirmText: '确定',
          cancelText: '取消',
          confirmColor: '#56d39d',
          success: ({ confirm, cancel }) => {
            if (confirm) {
              uni.showToast({
                title: '加载中...',
                icon: 'loading',
                mask: true
              })
              batchUpdateArtworks({
                author_id,
                ids: this.ids
              }).then(result => {
                if (result && result.code === 200) {
                  uni.hideToast();
                  this.getAllArtworksList();
                  this.album.selectAlbumShow = false;
                }
              })
            }
          }
        })
      },

      // 复制图片到另一个主页
      copyArtworksToAuthorHome(author_id) {
        uni.showModal({
          title: '温馨提示',
          content: `确定要复制到该主页吗？`,
          confirmText: '确定',
          cancelText: '取消',
          confirmColor: '#56d39d',
          success: ({ confirm, cancel }) => {
            if (confirm) {
              uni.showToast({
                title: '加载中...',
                icon: 'loading',
                mask: true
              })
              // 复制方法
              uni.showToast({
                title: '加载中...',
                icon: 'loading',
                mask: true
              })
              batchCopyArtworks({
                author_id,
                ids: this.ids
              }).then(result => {
                if (result && result.code === 200) {
                  uni.hideToast();
                  this.album.selectAlbumShow = false;
                }
              })
            }
          }
        })
      },

      // 选择作品
      handleCheckBox(val) {
        this.artworksList[val].checked = !this.artworksList[val].checked;
      },
      
      // 修改移动图片的类型
      changeMoveType(index) {
        this.currentMove = index;
      },

      // 修改类型
      tabsChange(index) {
        this.searchForm.cate_id = this.artworksTypeAllListData[index].id;
        this.artworksList = [];
        this.tabsCurrent = index;
        this.getAllArtworksList();
      },

      // 返回
      goBack() {
        let pages = getCurrentPages();
        let pagesLength = pages.length;

        if (pagesLength > 1) {
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.switchTab({ url: '/pages/creativeCenter/index' });
        }
      },

      // 关闭
      close() {
        this.album.selectAlbumShow = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .move-container{
    padding: 230rpx 32rpx 120rpx 32rpx;

    .header-container{
      height: 210rpx;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 32rpx 32rpx 0 32rpx;
      background-color: #fff;
      z-index: 9;
    }

    .tabs-container{
      padding: 12rpx 0;
    }

    .bottom-main{
      position: fixed;
      bottom: calc(var(--window-bottom) + 60rpx);
      z-index: 20;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 2;

      .bottom-view{
        display: flex;
        justify-content: center;
        min-width: 400rpx;
        padding: 24rpx 30rpx;
        background: #fff;
        border: 2rpx solid $uni-color-primary2;
        border-radius: 92rpx;

        &-button{
          color: $uni-color-primary;
          font-size: 24rpx;
          position: relative;
          padding-right: 34rpx;
          margin-right: 34rpx;
          white-space: nowrap;

          &-text{
            color: $uni-color-primary;
            padding-left: 6rpx;
          }
        }

        &-button-before{
          &::before{
            content: "";
            position: absolute;
            right: 0;
            width: 2rpx;
            height: 32rpx;
            background: #e9e9e9;
          }
        }

        &-button-padding{
          padding-right: 16rpx;
          margin-right: 16rpx;
        }

        &-button-margin0{
          margin-right: 0;
          padding-right: 0;
        }
      }
    }
  }
</style>
